import React, { useReducer, useState, type JSX } from 'react'
import Home from './pages/Home'
import Sublist from './pages/Sublist'
import My from './pages/My'
import Details from './pages/Details'
import Login from './pages/Login'
import { Switch, Route, Redirect, type RouteComponentProps } from 'react-router-dom'

import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'

import { useHistory, useLocation } from 'react-router-dom'
import Ctx from './store/Ctx'
import { reducer, initState } from './store/reducer'

//底部导航数据类型
interface appanvTs {
  path: string,
  icon: JSX.Element,
  title: string
}

export default function App() {

  //底部标签栏的数据
  let [appnav, setAppnav] = useState<Array<appanvTs>>([
    { path: '/home', icon: <HomeO />, title: '首页' },
    { path: '/sublist', icon: <Search />, title: '订阅' },
    { path: '/my', icon: <FriendsO />, title: '我的' },
  ])

  let history = useHistory()
  let location = useLocation()

  let [state, dispatch] = useReducer(reducer, initState)

  return (<Ctx.Provider value={{
    ...state,
    dispatch
  }}>
    <div>
      {/* 配置路由 */}
      <Switch>
        <Route path='/home' component={Home} />
        <Route path='/sublist' component={Sublist} />
        <Route path='/my' component={My} />
        <Route path='/details' component={Details} />
        <Route path='/login' component={Login} />
        <Redirect to='/' from='/home' />
      </Switch>


      {/* 引入标签栏 */}
      <div className='demo-tabbar'>
        <Tabbar value={location.pathname} onChange={(e) => {
          history.push(e as string)
        }}>
          {
            appnav.map(item => {
              return <Tabbar.Item key={item.path} name={item.path} icon={item.icon}>
                {item.title}
              </Tabbar.Item>
            })
          }
        </Tabbar>
      </div>
    </div>
  </Ctx.Provider>

  )
}
